<
コンテンツ
説明 バグレポート

フローティング アプリ バーをリストの上に配置する

コンテンツ

ユーザーがアイテムのリストを見やすくするために、 ユーザーがリストを下にスクロールするときにアプリ バーを非表示にすることもできます。 これは、アプリが「背の高い」ものを表示する場合に特に当てはまります。 垂直方向のスペースを多く占めるアプリバー。

通常、アプリバーを作成するには、appBarの財産Scaffoldウィジェット。これにより、常に上に残る固定アプリバーが作成されます のbodyのScaffold。

アプリバーを別の場所から移動するScaffoldウィジェットをCustomScrollViewアプリバーを作成できます スクロールすると画面外にスクロールします 中に含まれるアイテムのリストCustomScrollView。

このレシピでは、CustomScrollViewのリストを表示するには ユーザーがスクロールすると画面外にスクロールするアプリバーが上部にあるアイテム 次の手順を使用してリストを下に移動します。

  1. を作成しますCustomScrollView。
  2. 使用SliverAppBarフローティング アプリ バーを追加します。
  3. を使用してアイテムのリストを追加しますSliverList。

1.CustomScrollView

フローティング アプリ バーを作成するには、アプリ バーをCustomScrollViewこれにはアイテムのリストも含まれています。 これにより、アプリバーのスクロール位置と項目のリストが同期されます。 あなたは次のことを考えるかもしれませんCustomScrollViewウィジェットとしてListViewさまざまな種類のスクロール可能なリストを組み合わせて使用​​できるようになります。 ウィジェットも一緒に。

に提供されるスクロール可能なリストとウィジェットCustomScrollViewとして知られています細片。いくつかの種類があります などの細片のSliverList、SliverGridList、 とSliverAppBar。 実際、ListViewとGridViewウィジェットはSliverListとSliverGridスクロールを実装するウィジェット。

この例では、CustomScrollViewが含まれているSliverAppBarそしてSliverList。さらに、アプリバーを削除します あなたが提供するものScaffoldウィジェット。

Scaffold(
  // No appBar property provided, only the body.
  body: CustomScrollView(
      // Add the app bar and list of items as slivers in the next steps.
      slivers: <Widget>[]),
);

2. 使用するSliverAppBarフローティングアプリバーを追加するには

次に、アプリバーをCustomScrollView。 Flutter が提供するのは、SliverAppBarウィジェットは、 通常とよく似ていますAppBarウィジェット、 を使用しますSliverAppBarタイトルを表示するには、 タブ、画像など。

しかしSliverAppBar「フローティング」を作成する機能も提供します ユーザーがリストを下にスクロールすると、画面外にスクロールするアプリ バー。 さらに、次のように設定できます。SliverAppBar縮むことと ユーザーがスクロールすると展開します。

この効果を作成するには:

  1. タイトルのみを表示するアプリバーから始めます。
  2. をセットするfloating財産をtrue。 これにより、ユーザーは次の場合にアプリ バーをすばやく表示できるようになります。 リストを上にスクロールします。
  3. 追加flexibleSpace利用可能なものを満たすウィジェットexpandedHeight。
CustomScrollView(
  slivers: [
    // Add the app bar to the CustomScrollView.
    const SliverAppBar(
      // Provide a standard title.
      title: Text(title),
      // Allows the user to reveal the app bar if they begin scrolling
      // back up the list of items.
      floating: true,
      // Display a placeholder widget to visualize the shrinking size.
      flexibleSpace: Placeholder(),
      // Make the initial height of the SliverAppBar larger than normal.
      expandedHeight: 200,
    ),
  ],
)

3. を使用してアイテムのリストを追加します。SliverList

アプリバーが配置されたので、アイテムのリストをCustomScrollView。次の 2 つのオプションがあります。SliverListまたはSliverGrid。項目のリストを次々に表示する必要がある場合は、 使用SliverListウィジェット。 グリッド リストを表示する必要がある場合は、SliverGridウィジェット。

のSliverListとSliverGridウィジェットは 1 つの必須パラメータを取ります:SliverChildDelegate、リストを提供します ウィジェットのSliverListまたSliverGrid。 たとえば、SliverChildBuilderDelegateスクロールすると遅延して構築される項目のリストを作成できます。 と同じようにListView.builderウィジェット。

// Next, create a SliverList
SliverList(
  // Use a delegate to build items as they're scrolled on screen.
  delegate: SliverChildBuilderDelegate(
    // The builder function returns a ListTile with a title that
    // displays the index of the current item.
    (context, index) => ListTile(title: Text('Item #$index')),
    // Builds 1000 ListTiles
    childCount: 1000,
  ),
)

インタラクティブな例

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Floating App Bar';

    return MaterialApp(
      title: title,
      home: Scaffold(
        // No appbar provided to the Scaffold, only a body with a
        // CustomScrollView.
        body: CustomScrollView(
          slivers: [
            // Add the app bar to the CustomScrollView.
            const SliverAppBar(
              // Provide a standard title.
              title: Text(title),
              // Allows the user to reveal the app bar if they begin scrolling
              // back up the list of items.
              floating: true,
              // Display a placeholder widget to visualize the shrinking size.
              flexibleSpace: Placeholder(),
              // Make the initial height of the SliverAppBar larger than normal.
              expandedHeight: 200,
            ),
            // Next, create a SliverList
            SliverList(
              // Use a delegate to build items as they're scrolled on screen.
              delegate: SliverChildBuilderDelegate(
                // The builder function returns a ListTile with a title that
                // displays the index of the current item.
                (context, index) => ListTile(title: Text('Item #$index')),
                // Builds 1000 ListTiles
                childCount: 1000,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
daff88a-351f-4368-9b8f-6e438096805d